CSS Layout

Slides: OpenOffice PowerPoint
Reading: HFHTML Ch. 12

Tools

XHTML to PDF translator: Prince 8.0 download.

FTP clients: FileZilla, FireFTP, and Net2FTP

To validate your CSS files: http://jigsaw.w3.org/css-validator.
To valicate your XHTML: http://validator.w3.org.

Lab, part I

• Here is the code for chapter 12 from the text's web site.
• Download and unzip it into your My Documents directory (or onto your thumb-drive).
• Create a two-column version of the (revised) starbuzz web site:
  1. In the HTML file, move the sidebar logical section to where you would like it to "float" (ie right below the logo and intro).
  2. In CSS, set the width of the sidebar logical section.
  3. In CSS, add the rule to "float" the sidebar to the right hand side of the page.
• Add navagation of the side of Tony's journal.html from Chapter 9. (Hint: from your browser save a copy of this file on your computer.)
  1. Create a sidebar with links to the entries in his journal. For example, the first link should be to the entry for August 20, the next link for the entry on July 14. Use the id attribute to create anchors in the page (see p 153 for a review).
  2. The sidebar should be to the right, below the title of the page. Use any page layout or rules you wish to place it there.
  3. The main part of the page and the sidebar should each have borders around them and different background colors.
• Validate your CSS files using the CSS validator: http://jigsaw.w3.org/css-validator
• Validate your XHTML files using the XHTML validator: http://validator.w3.org.
• (Optional) add the indicated icon web pages.

Lab, part II

On your thumb drive:

• In your labs directory, create a subdirectory for today's lab.
• Transfer the relevant files to this new subdirectory.
• Create a hyperlink from your labs directory's index.html to the web pages you worked on today.
• Use the link, visited, and hover pseudoclasses to change the colors of the hyperlinks in you about me website.
• Take your favorite foods page and add a sidebar that gives a short description of where you can find those foods -- either links to restaurants or to recipes or cookbooks if home-made. Make sure you place the sidebar section in the correct place to "float" (ie below the opening heading, but above your other text). Remember to set the width of the sidebar.
• Validate your CSS file using the CSS validator: http://jigsaw.w3.org/css-validator
• Validate your index.html file using the XHTML validator: http://validator.w3.org.
• Add the appropriate icon(s) to your index.html web page.

Lab, part III

• Using an FTP client, synchronize your web site to the image on your thumbdrive.

Always shut down your computer and turn off your display before leaving the lab.